<template>
  <div>
    <el-card>
      <div slot="header">
        <span>修改当前登录账户</span>
      </div>
      <el-form :model="account" label-width="50px">
        <el-form-item label="账号">
          <el-input v-model="account.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="account.password"></el-input>
        </el-form-item>
        <el-popconfirm
          title="确定修改吗？"
          icon="el-icon-user-solid"
          iconColor="#409EFF"
          @onConfirm="save"
        >
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-check"
            slot="reference"
            :disabled="!account.username || !account.password"
            >确认修改</el-button
          >
        </el-popconfirm>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { changeAccount } from '@/api/account'
import Vue from 'vue'
export default {
  name: 'Setting',
  data() {
    return {
      user: {},
      account: {
        id: 0,
        username: '',
        password: ''
      }
    }
  },
  created() {
    this.user = Vue.ls.get('user')
    this.account.username = this.user.username
  },
  // computed: {
  //   // 当前登录用户名
  //   userInfo() {
  //     return this.$store.getters.userInfo
  //   }
  // },
  methods: {
    save() {
      this.account.id = this.user.id
      changeAccount(this.account).then(res => {
        this.msgSuccess(res.msg)
        this.logout()
      })
    },
    logout() {
      Vue.ls.remove('access_token')
      Vue.ls.remove('user')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.el-card {
  width: 50%;
}
</style>
